<template>
  <div>
    <div class="drawer z-20">
      <input type="checkbox" id="drawerModal" ref="drawerModalCheckboxRef" class="drawer-toggle"
             @change="drawerModalCheckboxChanged"/>
      <div class="drawer-side">
        <label for="drawerModal" aria-label="close sidebar" class="drawer-overlay"></label>
        <div class="bg-base-100 min-h-full p-6">
          <div class="flex flex-col" style="width: 50rem;">
            <div class="flex">
              <span class="font-semibold text-xl">用户评价</span>
              <div class="grow">
              </div>
              <div class="flex cursor-pointer" @click="closeDrawer()">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
              </div>
            </div>
          </div>
          <slot name="main"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['drawer-modal-callback']);

const title = ref('')
const drawerModalCheckboxRef = ref()

function drawerModalCheckboxChanged(event) {
  const checked = event.target.checked
  if (checked) {
  } else {
  }
}

function showDrawer(_title) {
  console.log('fff')
  title.value = _title
  drawerModalCheckboxRef.value.checked = true
}

function closeDrawer() {
  title.value = ''
  drawerModalCheckboxRef.value.checked = false
}


defineExpose({
  showDrawer,
  closeDrawer
})

</script>

<style scoped>

</style>